Working with JSON Files

In this blog, I’ explain how to use and create json files.

A common use of JSON is to read data from a web server, and display the data in a web page.

Create an example to read JSON data from the js file.

 <!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JSON Files  Example</title>
</head>
<body>
 
    <h1>JSON Files  Example</h1>
    <div id="name"  style="float:left"></div>
    <div  id="profession" style="float:right;margin-right:  80%;"></div>
 
    <script>
        function  employeeList(arr) {
            var names =  "<b>Name</b><br>";
            var professions =  "<b>Profession</b><br>";
            var i;
            for (i = 0; i <  arr.length; i++) {
                names +=  arr[i].name+"<br>";
                professions +=  arr[i].profession + "<br>";
            }
              document.getElementById("name").innerHTML = names;
              document.getElementById("profession").innerHTML =  professions;
        }
    </script>
    <script  src="Employee.js"></script>
</body>
</html>

Here we need to this example explained. In the above example use the Employee.js file that show the employee name and profession as list.

1. Create Array of object

Use an array object for storing the data. In this array all contain two information that is name and profession of employee.

[

{

"name": "Amit Patel",

"profession": "Software Engineer"

{

"name": "Satish Kumar",

"profession": "Software Engineer"

{

"name": "Dev Shukla",

"profession": "Web Developer"

}

]

2. Display the Employee List

Create a javascript function that shows the array list as an employee’s in the div name and profession.

function employeeList(arr) {
            var names = "<b>Name</b><br>";
            var professions =  "<b>Profession</b><br>";
            var i;
            for (i = 0; i < arr.length;  i++) {
                names +=  arr[i].name+"<br>";
                professions +=  arr[i].profession + "<br>";
            }
            document.getElementById("name").innerHTML  = names;
              document.getElementById("profession").innerHTML =  professions;
          }

Call employeeList() with textArray:

employeeList(textArray);

3. Use the array as argument

Call the employeeList() function to get the list of an employee as an argument:

employeeList([

{

"name": "Amit Patel",

"profession": "Software Engineer"

{

"name": "Satish Kumar",

"profession": "Software Engineer"

{

"name": "Dev Shukla",

"profession": "Web Developer"

}

]);

4. Put this function in JS file

This code put in a js file named as Employee.js as like this:

Employee.js

employeeList([

{

"name": "Amit Patel",

"profession": "Software Engineer"

{

"name": "Satish Kumar",

"profession": "Software Engineer"

{

"name": "Dev Shukla",

"profession": "Web Developer"

}

]);

5. Add js file in your program

This Employee.js file add in the program by the script tag like as:

<script src="Employee.js"></script>

Script add Employee.js file in your program that contain employee dat.

I hope that this blog is helpful for you. Thanks!

json

Updated 01-Oct-2014

blog

Working with JSON Files

1. Create Array of object

Call employeeList() with textArray:

4. Put this function in JS file

This code put in a js file named as Employee.js as like this:

Employee.js

5. Add js file in your program

This Employee.js file add in the program by the script tag like as:

Anchal Kesharwani

Leave Comment

1 Comments

Comments

Liked By